<template>
  <div id="app">
    <mt-header title="笑脸地图">
      <a slot="left" href="javascript:history.back(-1)">
        <mt-button icon="back">返回</mt-button>
      </a>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <main>
        <div class="seachfrom">
        <form data-formposition="i" class="se-form" id="index-form" action="/from=844b/s" method="get" autocomplete="off">
          <div class="con-wrap">
            <input type="search" v-model="seachtext" placeholder="请输入你要查找的企业" class="se-input adjust-input">
            <div class="se-inner"><button id="index-bn" class="se-bn" type="button" @click="seach()">搜索</button>
            </div>
          </div>
        </form>
      </div>
      <div id="container" style="width:500px; height:300px"></div>
      <div class="enterprise">
        <li>
          <a>
            <p>
              托管班
            </p>
            <p>
              福州市仓山区金州北路156号
            </p>
          </a>
        </li>
        <li>
          <a>
            <p>
              托管班
            </p>
            <p>
              福州市仓山区金州北路156号
            </p>
          </a>
        </li>
        <li>
          <a>
            <p>
              托管班
            </p>
            <p>
              福州市仓山区金州北路156号
            </p>
          </a>
        </li>
      </div>
    </main>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios';
  var map;
  import {
    Header,
    Button
  } from 'mint-ui';

  export default {
       data() {
            return {
                seachtext: '',
            };
        }, 
      components: {
      "mt-button": Button,
      "mt-header": Header,
    },
    mounted: function () {
      this.init();
    },
    methods: {
      init: function () {
        map = new AMap.Map('container', {
          center: [116.397428, 39.90923],
          resizeEnable: true,
          zoom: 10
        })
        AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
          map.addControl(new AMap.ToolBar())
          map.addControl(new AMap.Scale())
        })
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
  .map {
    width: 100%;
    height: 250px;
  }
  
  .enterprise {
    li {
      border-bottom: 1px solid #e7e7e7;
      a {
        padding: 10px 0 10px 10px;
        overflow: hidden;
        display: block;
        p {
          margin: 0;
        }
      }
    }
  }
  
  .enterprise li p:first-child {
    margin-bottom: 5px;
    color: #333333;
    font-size: .95rem;
  }
  
  .enterprise li p:last-child {
    color: #868686;
  }
  /*搜索*/
    #index-form {
    margin: 0
  }
  
  .seachfrom {
    background: #fff;
    padding: 10px 15px;
    border-bottom: 1px solid #e7e7e7;
  }

  #index-form {
margin: 0 16px;
height:35px;
background: #fff;
border: 1px solid #d2d2d2;
-webkit-border-radius: 2px;
border-radius: 2px;
}
#index-form .con-wrap {
display: -moz-box;
display: -webkit-box;
display: box;
width: 100%;
}
.se-input {
-webkit-border-radius: 0;
border-radius: 0;
margin: 0;
padding: 7px 42px 7px 6px;
height: 35px;
line-height: 28px;
resize: none;
overflow: hidden;
border: 0;
box-sizing:border-box
}
.se-input,.se-encode {
-webkit-appearance: none;
display: block;
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
font-size:.9rem;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.adjust-input {
position: relative;
word-break: break-all;
word-wrap: break-word;
box-sizing: border-box;
// background: url(../img/seach.png) no-repeat;
background-position: 8px;
text-align:left;
}
.se-inner {
width: 82px;
position: relative;
}
#index-bn {
position: absolute;
top: -1px;
right: -1px;
width:60px;
height:35px;
background: #21aeff;
color: #fff;
white-space: nowrap;
line-height:35px;
letter-spacing: -1px;
font-size:.95rem;
box-sizing: inherit;
border:rgba(255, 0, 0, 0);
-webkit-border-top-right-radius: 2px;
border-top-right-radius: 2px;
-webkit-border-bottom-right-radius: 2px;
border-bottom-right-radius: 2px;
text-shadow: none;
}
</style>
